<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form size="small" label-width="90px" :rules="tabRules">
                    <el-table v-loading="loading" :data="tableData" :max-height="tableHeight" size="small"
                              style="width: 100%;margin-bottom: 15px">
                        <el-table-column prop="colSort" label="排序" width="80px">
                            <template slot-scope="scope">
                                <el-input v-model.number="tableData[scope.$index].colSort" size="mini"
                                          class="edit-input"/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="colName" label="字段名称" width="100px"/>
                        <el-table-column prop="dataType" label="字段类型" width="100px"/>
                        <el-table-column prop="dataLen" label="字段长度" width="100px"/>
                        <el-table-column prop="colNotes" label="字段描述" width="180px">
                            <template slot-scope="scope">
                                <el-input v-model="tableData[scope.$index].colNotes" size="mini"
                                          class="edit-input"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="是否必填" width="70px">
                            <template slot-scope="scope">
                                <!--设置必填,切不可编辑-->
                                <el-checkbox v-model="tableData[scope.$index].depColTfReq" true-label="true"
                                             false-label="false" disabled="true"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="是否列表" width="70px">
                            <template slot-scope="scope">
                                <el-checkbox v-model="tableData[scope.$index].depColTfList" true-label="true"
                                             false-label="false"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="是否表单" width="70px">
                            <template slot-scope="scope">
                                <el-checkbox v-model="tableData[scope.$index].depColTfForm" true-label="true"
                                             false-label="false" @change="depColTfFormChange(scope.$index)"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="表单类型" width="120px">
                            <template slot-scope="scope">
                                <el-select v-model="tableData[scope.$index].depColBdType" filterable class="edit-input"
                                           :clearable="tableData[scope.$index].depColTfForm=='true'?false:true"
                                           size="mini" placeholder="请选择"
                                           @change="dbTypeChanged(scope.$index,scope.row)">
                                    <el-option v-for="item in dics.depColBdType" :key="item.dict_code"
                                               :label="item.dict_name === '' ? item.name : item.dict_name"
                                               :value="item.dict_code"/>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="查询方式" width="120px">
                            <template slot-scope="scope">
                                <el-select v-model="tableData[scope.$index].depColQyMode" filterable class="edit-input"
                                           clearable size="mini" placeholder="请选择"
                                           @change="depColQyModeChange(scope.$index)">
                                    <el-option v-for="item in dics.depColQyMode" :key="item.dict_code"
                                               :label="item.dict_name === '' ? item.name : item.dict_name"
                                               :value="item.dict_code"/>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="关联字典" width="180px">
                            <template slot-scope="scope">
                                <el-select v-model="tableData[scope.$index].depColDict" filterable class="edit-input"
                                           clearable size="mini" placeholder="请选择"
                                           @change="depColDictChange(scope.$index)">
                                    <el-option v-for="item in dics.depColDict" :key="item.dict_code"
                                               :label="item.dict_name === '' ? item.name : item.dict_name"
                                               :value="item.dict_code"/>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="特殊校验" width="150px">
                            <template slot-scope="scope">
                                <el-select v-model="tableData[scope.$index].colRules" filterable class="edit-input"
                                           clearable size="mini" placeholder="请选择">
                                    <el-option v-for="item in dics.colRules" :key="item.dict_code"
                                               :label="item.dict_name === '' ? item.name : item.dict_name"
                                               :value="item.dict_code"/>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </div>
        </div>
        <el-form :model="data" ref="newForm" :rules="rules" label-position="labelPosition"
                 label-width="100px" style="margin-bottom: 20px;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="模块" prop="depProModule">
                        <el-input v-model="data.depProModule" style="width: 90%"
                                  placeholder="请填写模块"></el-input>
                        <div class="inputDiv">模块的名称，请选择项目中已存在的模块</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="depProProName">
                        <el-input v-model="data.depProProName" style="width: 90%"
                                  placeholder="请填写项目名称"></el-input>
                        <div class="inputDiv">所属项目名称</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="包" prop="depProPurses">
                        <el-input v-model="data.depProPurses" style="width: 90%"
                                  placeholder="请填写包"></el-input>
                        <div class="inputDiv">项目包的名称，生成的代码放到哪个包里面</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="作者" prop="depProAuthor">
                        <el-input v-model="data.depProAuthor" style="width: 90%"
                                  placeholder="请填写作者"></el-input>
                        <div class="inputDiv">作者名称</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="前端路径" prop="depProWebPath">
                        <el-input v-model="data.depProWebPath" style="width: 90%"
                                  placeholder="请填写前端路径"></el-input>
                        <div class="inputDiv">输入views文件夹下的目录，不存在即创建</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生成范围" prop="depProRange">
                        <el-select placeholder="请选择生成范围" style="width: 90%" v-model="data.depProRange"
                                   clearable filterable>
                            <el-option v-for="item in dics.depProRange" :key="item.dict_code"
                                       :label="item.dict_name"
                                       :value="item.dict_code"></el-option>
                        </el-select>
                        <div class="inputDiv">选择生成前端、后端还是前后端都生成</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="扩展功能" prop="depProExtension">
                        <el-select placeholder="请选择扩展功能" style="width: 90%" v-model="data.depProExtension" clearable
                                   filterable>
                            <el-option v-for="item in dics.depProExtension" :key="item.dict_code"
                                       :label="item.dict_name" :value="item.dict_code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer" id="button"
              style="text-align: center;display:block;margin-bottom: 40px;margin-top: 20px;">
            <el-button type="primary" @click="save('newForm')">保 存</el-button>
            <el-button @click="close">关 闭</el-button>
        </span>
    </div>
</template>
<script>

    export default {
        name: "",
        components: {},
        data() {
            return {
                that: this,
                tableHeight: window.innerHeight - 335,
                url_pageDep: '/little-base-generator/generator/gen/queryDep',//查询配置
                url_insert: '/little-base-generator/generator/gen/insertDep',//添加配置
                multipleSelection: [],
                // 表头及字段
                tableCols: [
                    {label: '数据库表', prop: 'tabName'},
                    {label: '字段名', prop: 'colName'},
                    {label: '字段类型', prop: 'dataType'},
                    {label: '字段注释', prop: 'colNotes'},
                ],
                tableData: [],//表格数据
                form: {},
                data: {},
                dics: {},
                rules: {
                    depProModule: [{required: true, message: " ", trigger: "focus"}],
                    depProAuthor: [{required: true, message: " ", trigger: "focus"}],
                    depProProName: [{required: true, message: " ", trigger: "focus"}],
                    depProPurses: [{required: true, message: " ", trigger: "focus"}],
                    depProWebPath: [{required: true, message: " ", trigger: "focus"}],
                    depProRange: [{required: true, message: " ", trigger: "focus"}],
                    /*depProExtension: [{required: true, message: " ", trigger: "focus"}],*/
                },
                tabRules: {
                    depColDict: [{required: true, message: " ",}],
                },
            }
        },
        created() {
            this.initDict();//加载字典
            this.form = JSON.parse(localStorage.getItem("codeDeploy"));
            this.getPages();
        },
        destroyed() {
            this.setCloseTag();
        },
        methods: {
            /*初始化字典*/
            initDict() {
                this.dics.depColDict = this.$getDict('GEN_DEP_DICT');
                this.dics.depProRange = [
                    {dict_code: '前端', dict_name: '前端'},
                    {dict_code: '后端', dict_name: '后端'},
                    {dict_code: '前后端', dict_name: '前后端'},
                ];
                this.dics.depColBdType = [
                    {dict_code: 'Input', dict_name: '文本框'},
                    {dict_code: 'Textarea', dict_name: '文本域'},
                    {dict_code: 'QuillEditor', dict_name: '富文本域'},
                    {dict_code: 'Number', dict_name: '数字框'},
                    {dict_code: 'Radio', dict_name: '单选框'},
                    {dict_code: 'Select', dict_name: '下拉框'},
                    {dict_code: 'Date', dict_name: '日期框'},
                    {dict_code: 'File', dict_name: '文件上传'},
                ];
                this.dics.depColQyMode = [
                    {dict_code: 'EQ', dict_name: '等于'},
                    {dict_code: 'LIKE', dict_name: '包含'},
                    {dict_code: 'GT', dict_name: '大于'},
                    {dict_code: 'GE', dict_name: '大于等于'},
                    {dict_code: 'LT', dict_name: '小于'},
                    {dict_code: 'LE', dict_name: '小于等于'},
                ];
                this.dics.colRules = [
                    {dict_code: 'validateIdCard', dict_name: '身份证校验'},
                    {dict_code: 'validatePhone', dict_name: '电话号码校验'},
                ];
                this.dics.depProExtension = [
                    {dict_code: 'elasticsearch', dict_name: '使用全文检索(Elasticsearch)'},
                ];
            },
            // 获取数据
            getPages() {
                this.tableData = [];
                this.data = {};
                var depForm = {
                    dbId: this.form.dbId,
                    tabName: this.form.tabName,
                };
                this.$post(this.url_pageDep, depForm).then(res => {
                        if (res.code == 'success') {
                            var map = res.data;
                            this.tableData = map.colList;
                            this.data = map.pro;
                            /*当没有配置信息时,默认一个配置*/
                            if (this.data.depProModule == null) {
                                this.data.depProModule = 'little-base-generator';
                                this.data.depProProName = 'generator';
                                this.data.depProPurses = 'com.wonders.little.base.generator';
                                this.data.depProAuthor = 'admin';
                                this.data.depProWebPath = 'views';
                                this.data.depProRange = '前后端';
                                /*this.data.depProExtension = 'elasticsearch';*/
                            }
                            /*当数据库设置字段必填时,该字段必须为表单*/
                            for (let i = 0; i < this.tableData.length; i++) {
                                this.tableData[i].depColTfForm = 'true';
                                /*是否表单值改变事件*/
                                this.depColTfFormChange(i);
                            }
                        } else {
                            this.$message({type: res.code, message: res.msg});
                        }
                    }
                )
            },
            //保存
            save(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        delete this.data.depAddDate;
                        delete this.data.depRevDate;
                        this.data.dbId = this.form.dbId;
                        this.data.tabName = this.form.tabName;
                        this.data.tabType = this.form.tabType;
                        for (let i = 0; i < this.tableData.length; i++) {
                            delete this.tableData[i].depAddDate;
                            delete this.tableData[i].depRevDate;
                        }
                        this.$post(this.url_insert, {
                            depObj: JSON.stringify(this.data),
                            depList: JSON.stringify(this.tableData),
                            dbUser: this.form.dbUser,
                        }).then(res => {
                            if ('success' === res.code) {
                                this.$message({type: res.code, message: res.msg});
                                this.close();
                            } else {
                                this.$message({type: res.code, message: res.msg});
                            }
                        });
                    } else {
                        this.$alert('您有必填项未填写，请确认！', '系统提示', {confirmButtonText: '确定'});
                    }
                });
            },
            /*是否表单值改变事件*/
            depColTfFormChange(index) {
                if (this.tableData[index].depColTfForm == 'true') {
                    /*默认一个表单类型*/
                    if (this.tableData[index].dataType.toLowerCase() == 'number' ||
                        this.tableData[index].dataType.toLowerCase().indexOf("int") > -1) {
                        this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[3].dict_code);
                    } else if (this.tableData[index].dataType.toLowerCase().indexOf("date") > -1) {
                        this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[6].dict_code);
                    } else if (this.tableData[index].dataType.toLowerCase() == 'clob' ||
                        this.tableData[index].dataType.toLowerCase() == 'blob' ||
                        this.tableData[index].dataType.toLowerCase().indexOf("text") > -1) {
                        this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[2].dict_code);
                    } else {
                        if (this.tableData[index].depColDict != null) {
                            this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[5].dict_code);
                        } else {
                            this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[0].dict_code);
                        }
                    }
                } else {
                    this.$set(this.tableData[index], 'depColBdType', '');
                }
            },
            /*查询方式值改变事件*/
            depColQyModeChange(index) {
                if (this.tableData[index].depColQyMode != '' && (this.tableData[index].depColBdType == undefined || this.tableData[index].depColBdType == '')) {
                    this.$set(this.tableData[index], 'depColQyMode', '');
                    this.$message({type: 'fail', message: '请先选择表单类型'});
                }
            },
            /*关联字典值改变事件*/
            depColDictChange(index) {
                if (this.tableData[index].depColDict != '') {
                    this.$set(this.tableData[index], 'depColBdType', this.dics.depColBdType[5].dict_code);
                }
            },
            /*表单类型值改变校验*/
            dbTypeChanged(index, row) {
                /*字段类型和表单类型校验*/
                if (row.depColBdType.toLowerCase().indexOf("date") > -1) {
                    row.depColBdType = '';
                    this.$message({type: 'error', message: '请将数据库该字段类型修改为DATE'});
                }
                if (row.depColBdType.toLowerCase() != 'select') {
                    this.$set(this.tableData[index], 'depColDict', '');
                }
                if (row.depColBdType.toLowerCase() === 'select' && row.depColDict === '') {
                    row.depColBdType = '';
                    this.$message({type: 'error', message: '请先选择关联字典'});
                }
            },
            //右上角关闭事件
            handleDialogClose() {
                this.close();
            },
            //关闭窗口方法
            close() {
                let tagsList = this.$parent.$children[2].tagsList;
                for (let i = 0; i < tagsList.length; i++) {
                    //判断路由是否已经打开
                    if (tagsList[i].path === '/codeDeploy') {
                        tagsList.splice(i, 1)[0];
                    }
                }
                this.tableData = [];
                this.data = {};
                this.form = {};
                localStorage.removeItem("codeDeploy");
                this.$router.replace({name: 'generateCode'});
            },
            /*打关闭标识*/
            setCloseTag() {
                localStorage.setItem("fromDeploy", true);
            },
        }
    }
</script>

<style scoped>
    @import "../../../../assets/css/common.css";
</style>
<style>
    .inputDiv {
        margin-bottom: -18px;
        color: red;
        width: 90%;
        text-align: center;
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
        background-color: #409EFF;
        border-color: #409EFF;
    }
</style>

